import {Component} from 'react'
import './CashOut.css'
import axios from 'axios'
import qs from 'qs'
import {Space, Table,message} from "antd";
import {Link} from "react-router-dom";


class CashOut extends Component{

    constructor() {
        super();
        this.state = {
            applyNum:'',      //申请人数
            totalMoney:'',  //提现总金额
            selectedRowKeys: [],
            tableData:[],
            current:1,
            currentState:-1        //当前查询状态
        }
    }

    componentWillMount() {
        //获取table数据
        this.getTableList();
    }
    //驳回请求
    rejectRequest(record){
        axios.post('/api/admin/finance/deleteShopOrder',qs.stringify(
            {
                shopOrderId:record.shopOrderId
            }
        ),{
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
            if(res.data.code==200){
                message.success('已驳回请求');
                var state = this.state.currentState;
                this.setState({
                    currentState:-1
                },()=>{
                    this.getDifStateData(state)
                });
            }
        })
    };
    //同意申请
    agreeRequest(record){
        axios.post('/api/admin/finance/updateStatus',qs.stringify(
            {
                shopOrderId:record.shopOrderId
            }
        ),{
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((res)=>{
            if(res.data.code==200){
                message.success('已同意放款');
                var state = this.state.currentState;
                this.setState({
                    currentState:-1
                },()=>{
                    this.getDifStateData(state)
                });

            }
        })
    };
    //获取不同状态的数据
    getDifStateData(state){
        if(this.state.currentState == state){
            this.setState({
                currentState:-1
            },()=>{
                this.getTableList()
            })
        }else {
            this.setState({
                currentState:state
            },()=>{
                axios.post('/api/admin/finance/orderStatusList',qs.stringify(
                    {
                        ordrStatus:state
                    }
                ),{
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded'
                    }
                }).then((res)=>{
                    console.log(res)
                    this.setState({
                        tableData: this.turnStyle(res.data.data.list)
                    });

                })
            })
        }
    };
    //页码改变
    changePage=(page)=>{
        this.setState({
            current: page
        })
    };
    //获取table数据
    getTableList=()=>{
        axios.post('/api/admin/finance/orderList').then((res)=>{
            if(res.data.msg === 'success'){
                var list =res.data.data.financeList.list;
                this.setState({
                    tableData: this.turnStyle(list)
                },()=>{
                    this.getCount();
                })
            }
        })
    };
    //转换数据的格式
    turnStyle(list){
        list.forEach(item=>{
            item.key = item.shopOrderId;
            item.userName = item.shop.userName;
            item.shopName = item.shop.shopName;
            item.shopMoney = item.shop.shopMoney;
            if(item.ordrStatus === 0){
                item.ordrStatus = '待放款'
            }else if(item.ordrStatus === 1){
                item.ordrStatus = '放款中'
            }else if(item.ordrStatus === 2){
                item.ordrStatus = '已到账'
            }else if(item.ordrStatus === 3){
                item.ordrStatus = '已驳回'
            }
        });
        return list;
    };
    //统计数据
    getCount(){
        var total = 0;
        this.state.tableData.forEach(item=>{
            total+= item.money
        });
        this.setState({
            applyNum:this.state.tableData.length,
            totalMoney:total
        })
    }
    render() {
        const columns = [
            {
                title: '订单号',
                dataIndex: 'shopOrderId',
                key:'shopOrderId',
            }, {
                title: '用户名',
                dataIndex: 'userName',
                key: 'userName',
            },{
                title: '店铺名',
                dataIndex: 'shopName',
                key: 'shopName',
            },{
                title: '可提现',
                dataIndex: 'shopMoney',
                key: 'shopMoney',
            },{
                title: '提现金额',
                dataIndex: 'money',
                key: 'money',
            },{
                title: '申请时间',
                dataIndex: 'createTime',
                key: 'createTime',
            },{
                title: '状态',
                dataIndex: 'ordrStatus',
                key: 'ordrStatus',
            },{
                title: '操作',
                dataIndex: 'operation',
                key: 'operation',
                render:(text,record)=>(
                    <div className='Operation'>
                        <span className={record.ordrStatus == '待放款'?'':'hiddenOperation'} onClick={this.agreeRequest.bind(this,record)}>放款</span>
                        <span className={record.ordrStatus === '待放款'?'':'hiddenOperation'} onClick={this.rejectRequest.bind(this,record)}>驳回</span>
                    </div>
                )
            }
        ];
        return (
            <>
                <div className='cashBox'>
                    {/*头部*/}
                    <div className='top'>
                        <div className={this.state.currentState==-1?'top_left cancelQuery':'top_left'}>
                            <button onClick={()=>this.getDifStateData(0)}>待放款</button>
                            <button onClick={()=>this.getDifStateData(1)}>放款中</button>
                            <button onClick={()=>this.getDifStateData(3)}>已驳回</button>
                        </div>
                        <div className='detailData'>
                            当前申请人数{this.state.applyNum}人，可提现总金额{this.state.totalMoney}元
                        </div>
                    </div>
                {/*    table*/}
                    <Table
                        columns={columns}
                        dataSource={this.state.tableData}
                        pagination={{  // 分页
                            simple: false,
                            defaultPageSize:5,
                            current: this.state.current,
                            total: this.state.tableData.length,
                            onChange: this.changePage,
                        }}/>
                </div>
            </>
        );
    }
}
export default CashOut
